<template>
    <div class="my-padding-10">
        <!--面包屑-->
        <el-row class="my-margin-top-10">

            <el-input style="display:none" placeholder="游戏id隐藏" v-model="gameId"></el-input>

            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>统计分析</el-breadcrumb-item>
                <el-breadcrumb-item>游戏统计</el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>

        <el-row class="my-margin-top-20" :gutter="10">
            <el-col :xl="2" :lg="3">
                <el-select v-model="chartType" size="small">
                    <el-option label="按月份统计" value="month"></el-option>
                    <el-option label="按年份统计" value="year"></el-option>
                </el-select>
            </el-col>

            <el-col :span="3">
                <el-date-picker style="width: 100%" size="small" v-if="chartType=='month'"
                    v-model="yearMonth"
                    type="month"
                    value-format="yyyy-MM"
                    :editable="editable"
                    placeholder="选择月">
                </el-date-picker>
                <el-date-picker style="width: 100%" size="small" v-if="chartType=='year'"
                                v-model="year"
                                type="year"
                                value-format="yyyy"
                                :editable="editable"
                                placeholder="选择年">
                </el-date-picker>
            </el-col>
            <el-col :xl="2" :lg="3" style="display:none">
                <el-select v-model="countType" size="small">
                    <el-option label="按次数统计" value="count"></el-option>
                    <el-option label="按人数统计" value="student"></el-option>
                </el-select>
            </el-col>
            <el-col :xl="2" :lg="3">
                <el-select v-model="gameClass" size="small">
                    <el-option label="全部" value="0"></el-option>
                    <el-option label="认知训练" value="1"></el-option>
                    <el-option label="趣味测试" value="2"></el-option>
                    <el-option label="情绪放松" value="3"></el-option>
                </el-select>
            </el-col>

            <el-col :span="4">
                <el-autocomplete size="small" style="width:100%"
                    v-model="gameName"
                    :fetch-suggestions="querySearchAsync"
                    @select="handleSelect"
                    placeholder="请输入游戏名称"
                >
                </el-autocomplete>

            </el-col>

            <el-col :span="2">
                <el-button type="primary" size="small" @click="clickQuery">确定</el-button>
            </el-col>
        </el-row>
        <el-row class="my-margin-top-10">
            <ve-line :data="chartData" :settings="chartSettings" :extend="extend" ></ve-line>
        </el-row>


    </div>

</template>

<script>

    import gradeJs from '@/utils/grade.js';
    export default {
        data(){
            let gradeList = gradeJs.getGradeList();
            let metrics = gradeList.map(item=>{return item.label})
            this.chartSettings = {
                metrics: metrics,
                dimension: ['日期'],
            };
            this.extend = {
                'xAxis.0.axisLabel.rotate': 45,
                'yAxis.0.minInterval': 1,
            };
            return {
                chartType: 'month',
                countType: 'count',
                year:'',
                yearMonth: '',
                gameClass: '0',//默认选中全部
                gameName:'',
                gameId: '0',
                editable: false,
                chartData: {
                    columns: ['日期', '', '二年级', '三年级','四年级','五年级','六年级','七年级','八年级','九年级'],
                    rows: []
                },

            }
        },
        methods: {
            myConfig(option){
                console.log(option)
            },

            clickQuery(){
                if(this.chartType=='month' && this.yearMonth==''){
                    this.$notify.error({
                        title: '错误',
                        message: '还没有选择月份'
                    });
                    return;
                }
                if(this.chartType=='year' && this.year==''){
                    this.$notify.error({
                        title: '错误',
                        message: '还没有选择年'
                    });
                    return;
                }
                this.getChart();
            },
            //queryString 为在框中输入的值
            //callback 回调函数,将处理好的数据推回
            querySearchAsync(queryString, callback) {
                var list = [{}];
                //调用的后台接口
                let p = {};
                let url = '/gameChart/getGameSelect';
                if(queryString != '' && queryString != null){
                    p.gameName = queryString;
                }
                //从后台获取到对象数组
                this.$http.fetch(url,p).then((response) => {
                    //在这里为这个数组中每一个对象加一个value字段, 因为autocomplete只识别value字段并在下拉列中显示
                    //console.info(response.data);
                    for (let i of response.data) {
                        i.value = i.name;//将想要展示的数据作为value
                    }
                    list = response.data;
                    callback(list);
                }).catch((error) => {
                    console.log(error);
                });
            },
            //选中后触发事件
            handleSelect(item) {
                this.gameId = item.id;
                //console.log("~~~"+item.id);
                //do something
            },
            //获取数据
            getChart(){
                let p = {};
                let url = '/gameChart/getGameChart';
                //p.chartType = this.chartType;
                //p.countType = this.countType;
                p.year = this.year;
                console.info(this.yearMonth);
                p.gameClass = this.gameClass;
                if(this.yearMonth.indexOf('-') != -1){
                    p.year = this.yearMonth.split('-')[0];
                    p.month = this.yearMonth.split('-')[1];
                }
                console.info(this.gameName);
                p.gameId =this.gameId;
                this.$http.fetch(url,p)
                    .then(res=>{
                        let data = res.data;
                        this.chartData.rows = data.map(item=>{
                            let vo = {};
                            vo['日期'] = item.time;
                            vo['一年级'] = item.grade1;
                            vo['二年级'] = item.grade2;
                            vo['三年级'] = item.grade3;
                            vo['四年级'] = item.grade4;
                            vo['五年级'] = item.grade5;
                            vo['六年级'] = item.grade6;
                            vo['七年级'] = item.grade7;
                            vo['八年级'] = item.grade8;
                            vo['九年级'] = item.grade9;
                            return vo;
                        })
                    })
            },
        },

        mounted(){
        }
    }



</script>
